<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
    @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标题">
          <a-input placeholder="请输入标题" v-decorator="['title', {}]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报告图集">
          <a-upload :multiple="true" action='http://ysyadmin.zxzkeji.com/ysyApi/app/utils/aliOssUpload'
            list-type="picture-card" @preview="handlePreview" @change="handleChange" :file-list="attachmentsList">
            <div>
              <a-icon type="plus" />
              <div class="ant-upload-text">
                报告图集
              </div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="内容详情">
          <j-editor style="width: 100%" v-decorator="[ 'content', {} ]" triggerChange></j-editor>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="点击量">
          <a-input-number v-decorator="[ 'hits', {}]" />
        </a-form-item>

      </a-form>
    </a-spin>

    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel1">
      <img alt="example" style="width: 100%;margin-top: 20px;" :src="previewImage" />
    </a-modal>
  </a-modal>
</template>

<script>
  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  import {
    httpAction,
    postAction
  } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import JEditor from '@/components/jeecg/JEditor'

  export default {
    name: "YsyRefineryreportModal",
    components: {
      JEditor
    },
    data() {
      return {
        title: "操作",
        visible: false,
        model: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 5
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          examineId: {
            rules: [{
              required: true,
              message: '请输入examineId!'
            }]
          },
        },
        url: {
          add: "/app/ysyRefineryreport/add",
          edit: "/app/ysyRefineryreport/edit",
          upload: '/app/utils/aliOssUpload',
        },
        refineryId: '',
        attachmentsList: [],
        previewVisible: false,
        previewImage: '',
      }
    },
    created() {},
    methods: {
      handleChange({
        fileList
      }) {
        this.attachmentsList = fileList;
      },
      handleCancel1() {
        this.previewVisible = false;
      },
      async handlePreview(file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      add() {
        this.edit({});
      },
      edit(record, refineryId) {
        this.form.resetFields();
        if (record && record.images) {
          console.log(record, 1119)
          let arr = []
          let arra = record.images.split(',')
          arra.forEach(item => {
            let obj = {
              url: item,
              uid: item,
              name: 'image.png',
              status: 'done',
            }
            arr.push(obj)
          })
          this.attachmentsList = arr
          console.log(this.attachmentsList, 999)
        }
        this.model = Object.assign({}, record);
        this.visible = true;
        this.refineryId = refineryId
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'examineId', 'title', 'author', 'refineryId', 'image', 'images',
            'content', 'hits', 'status'))
          //时间格式化
        });

      },
      close() {
        this.$emit('close');
        this.attachmentsList = []
        this.visible = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if (!this.model.examineId) {
              httpurl += this.url.add;
              method = 'post';
            } else {
              httpurl += this.url.edit;
              method = 'put';
            }
            let formData = Object.assign(this.model, values);
            //时间格式化

            let arrImages = []
            if (this.attachmentsList.length > 0 && !this.model.examineId) {
              this.attachmentsList.forEach(item => {
                arrImages.push(item.response.message)
              })
              formData.images = arrImages.toString()
            }
            if (this.attachmentsList.length > 0 && this.model.examineId) {
              this.attachmentsList.forEach(item => {
                arrImages.push(item.url)
              })
              formData.images = arrImages.toString()
            }
            formData.refineryId = this.refineryId
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit('ok');
              } else {
                that.$message.warning(res.message);
              }
              this.attachmentsList = []
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })



          }
        })
      },
      handleCancel() {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>